<template>
	<view class="web-header">
		<view class="header">
			<image class="logo" src="/static/home/logo.png"></image>
			<view class="right">
				<view class="phone_c">
					
					<image  class="web_show img" src="/static/2.1/phone.png"></image>
					<image   class="h5_show img_h5" src="/static/2.2/h5_phone.png"></image>
					
				 
					<view class="web_show">
						<view class=" search_input" v-if="in_search_page == false">
							<input v-model="search_value" class="input"/>
							<view class="btn" @click="web_search" >
								<image class="img_logo" src="/static/2.2/search_logo.png"></image>
							</view>
						</view>
					</view>
					
					<!-- <text class="text">400-862-2030</text> -->
				</view>
				<!-- <image class="search_input" src="/static/home/search_input.png"></image> -->
			</view>
		</view>
		<view class="bar">
			<navigator url="/pages/index/index">
			<view class="item " :class="{select:select_name == 'home'}">首页</view>
			</navigator>
			<!-- <view class="space"></view> -->
			<navigator url="/pages/article/article">
			<view class="item"   :class="{select:select_name == 'article'}">热门资讯</view>
			</navigator>
			
			<navigator url="/pages/pharmacy/pharmacy">
			<view class="item"   :class="{select:select_name == 'pharmacy'}">药库</view>
			</navigator>
			
			<navigator url="/pages/mall/mall">
			<view class="item"   :class="{select:select_name == 'mall'}">商城</view>
			</navigator>
			
			<navigator url="/pages/information/information">
			<view class="item"   :class="{select:select_name == 'information'}">同情用药</view>
			</navigator>
			
			<navigator url="/pages/new_drugs/new_drugs">
			<view class="item"   :class="{select:select_name == 'new_drugs'}">海外新药</view>
			</navigator>
			
			<navigator url="/pages/clinical_recruitment/clinical_recruitment">
			<view class="item"   :class="{select:select_name == 'clinical_recruitment'}">临床招募</view>
			</navigator>
			
			<navigator url="/pages/company_introduction/company_introduction">
			<view class="item"  :class="{select:select_name == 'company_introduction'}">公司介绍</view>
			</navigator>
			
			<!-- <view class="space"></view>
			<navigator url="/pages/business_introduction/business_introduction">
			<view class="item"  :class="{select:select_name == 'business_introduction'}">业务介绍</view>
			</navigator>
			<view class="space"></view>
			<navigator url="/pages/app_introduction/app_introduction">
			<view class="item"   :class="{select:select_name == 'app'}">App</view>
			</navigator>
			<view class="space"></view>
			
			<view></view> -->
		</view>
		<view class="menu">
			<image class="menu_logo"@click="show_menu = !show_menu" src="/static/2.2/menu.png"></image>
		   <view class="search"   >
			   <image class="search_input_left" src="/static/2.2/search_input_left.png"></image>
		       <input placeholder="搜索" :value="search_value" confirm-type="search" @confirm='search_confirm' class="input_text" /> 
		   </view>
			<!-- <image class="search" src="/static/2.2/search.png"></image> -->
		 
			<view v-if="show_menu" class="menu_list">
				<navigator url="/pages/index/index">
				<view class="item " :class="{select:select_name == 'home'}">首页</view>
				</navigator>
				<view class="line"></view>
				<!-- <view class="space"></view> -->
				<navigator url="/pages/article/article">
				<view class="item"   :class="{select:select_name == 'article'}">热门资讯</view>
				</navigator>
				<view class="line"></view>
				<navigator url="/pages/pharmacy/pharmacy">
				<view class="item"   :class="{select:select_name == 'pharmacy'}">药库</view>
				</navigator>
				<view class="line"></view>
				<navigator url="/pages/mall/mall">
				<view class="item"   :class="{select:select_name == 'mall'}">商城</view>
				</navigator>
				<view class="line"></view>
				<navigator url="/pages/information/information">
				<view class="item"   :class="{select:select_name == 'information'}">同情用药</view>
				</navigator>
				<view class="line"></view>
				<navigator url="/pages/new_drugs/new_drugs">
				<view class="item"   :class="{select:select_name == 'new_drugs'}">海外新药</view>
				</navigator>
				<view class="line"></view>
				<navigator url="/pages/clinical_recruitment/clinical_recruitment">
				<view class="item"   :class="{select:select_name == 'clinical_recruitment'}">临床招募</view>
				</navigator>
				<view class="line"></view>
				<navigator url="/pages/company_introduction/company_introduction">
				<view class="item"  :class="{select:select_name == 'company_introduction'}">公司介绍</view>
				</navigator>
			</view>
		</view>
		
		
		<!-- 癌种分类 -->
		<view class="filtrate_card" :class="{'is_home':is_home}">
			<image src="/static/2.2/filtrate_card.png" @click="filtrate_pop_click"></image>
		</view>
		
		<uni-popup zindex='10000' ref="popup" type="bottom">
			<view class="filtrate_pop">
				<view  class="close" @click="filtrate_pop_close" >
					<image src="/static/2.1/close.png"></image>
					
				</view>
				<view class="list">
					<view v-for="(item,index) in  clinicalRecruitmentTypeList" @click="btn_action(item)" class="btn"
						:class="{'select':item.id == select_item.id}">
						{{item.typeName}}
					</view>
					<view v-if="clinicalRecruitmentTypeList.length%3 != 0" class="btn last"></view>
				</view>
				<view class="img_pop"  >
					<image  src="/static/2.2/phone_2.png"></image>
				</view>
				
			</view>
		</uni-popup>
		<!-- <view>
			<u-swiper class="banner" height='781rpx' :list="list1" @change="change" @click="click"></u-swiper>
		</view> -->
	</view>
</template>

<script>
	export default {
		name: "web-header",
		props: {
			select_name: {
				type: String,
				default: ""
			},
			search_value: {
				type: String,
				default: ""
			},
			in_search_page: {
				type: Boolean,
				default: false
			},
			is_home: {
				type: Boolean,
				default: false
			},
			
		},
		mounted() {
		  // var title = '';
		  // uni.report('title',res.data.title)
		  // uni.setNavigationBarTitle({
		  // 	title:res.data.title
		  // })	
		  
		  
		  var that = this;
		  uni.$off('itemClick2');
		  
		  uni.$on('itemClick2', (item) => {
		  	// that.itemClick(item)
		  	// this.select_item = item;
		  	that.btn_action(item);
		  })
		  this.get_data()
		  
		},
		data() {
			return {
				list1: [
					'/static/home/banne_01.png',
				],
				show_menu:false,
				
				
				clinicalRecruitmentTypeList:[],
				select_item: {}
			};
		},
		methods:{
			web_search(){
				uni.redirectTo({
					url: '/pages/search/search'+'?s_text='+this.search_value
				}) 
			},
			search_confirm(e){
				console.log(e)
				uni.redirectTo({
					url: '/pages/search/search'+'?s_text='+e.detail.value
				}) 
				return;
				let location_hash = window.location.hash;
				let routes = getCurrentPages()
				var that = this;
				let curRoute = routes[routes.length - 1].route //获取当前页面的路由
				console.log(routes)
				var go_url_hash = '#/pages/search/search';
				var go_url = 'pages/search/search';
				if (location_hash != go_url_hash) { // curRoute != go_url
							
					uni.navigateTo({
						url: '/' + go_url+'?s_text='+e.detail.value
					})
					 
							
				} else {
					 //在本搜索当前页面
					 uni.$emit('search',e.detail.value)
				} 
			},
			search(){
				let location_hash = window.location.hash;
				let routes = getCurrentPages()
				var that = this;
				let curRoute = routes[routes.length - 1].route //获取当前页面的路由
				console.log(routes)
				var go_url_hash = '#/pages/search/search';
				var go_url = 'pages/search/search';
				if (location_hash != go_url_hash) { // curRoute != go_url
							
					uni.navigateTo({
						url: '/' + go_url
					})
					 
							
				} else {
					 //在本搜索当前页面
				} 
			},
			filtrate_pop_click() {
				this.$refs.popup.open('center')
			
			},
			filtrate_pop_close(){
					this.$refs.popup.close()
			}, 
			get_data() {
				// /website/clinicalRecruitmentTypeList
				var that = this;
				this.service("/website/clinicalRecruitmentTypeList", 'get', {
			
				}).then(res => {
					// that.details = res.data;
					console.log('临床招募 - 筛选条件')
					console.log(res)
					res.data.push({
						id: "",
						typeName: "全部"
					})
					that.clinicalRecruitmentTypeList = res.data
				})
			},
			btn_action(item) {
				this.filtrate_pop_close()
				this.select_item = item;
				
				let location_hash = window.location.hash;
				let routes = getCurrentPages()
				var that = this;
				let curRoute = routes[routes.length - 1].route //获取当前页面的路由
				console.log(routes)
				var go_url_hash = '#/pages/clinical_recruitment/clinical_recruitment';
				var go_url = 'pages/clinical_recruitment/clinical_recruitment';
				if (location_hash != go_url_hash) { // curRoute != go_url
			
					uni.navigateTo({
						url: '/' + go_url
					})
					setTimeout(() => {
						// uni.$emit() 
						uni.$emit('itemClick2', item);
					}, 100)
			
				} else {
					this.$emit('itemClick', item);
				}
			}
		}
		
	}
</script>

<style lang="scss">
.search_input{
	display: flex;
	align-items: center;
	margin-left: 60rpx;
	// margin-right: 40rpx;
	// margin-bottom: 33rpx;
	.input{
		// width: 852rpx;
		flex-grow:1;
		height: 66rpx;
		padding: 0rpx 40rpx;
		 
		 
		background: #FFFFFF;
		border: 3rpx solid rgba(151, 151, 151, 0.21);
		
		
		 
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 33rpx;
		letter-spacing: 1rpx;
	}
	.btn{
		width: 124rpx;
		height: 66rpx;
		background: #008796;
		transform: scale(1.1);
		display: flex;
		align-items: center;
		justify-content: center;
		.img_logo{
			width: 32rpx;
			height: 32rpx;
			// background: #000000;
		
		}
	}
}
</style>
